<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="">
		<cover-view class="PageLoading" @click.stop="" v-if="mode == 'cover'">
			<cover-view class="PageLoading-content">
				<cover-image class="pic" :src="imgPath + 'components/PageLoading/' + pic" mode=""></cover-image>
				<!-- <cover-view class="loader">
					<cover-view class="loading">
						<cover-view class="item" :ind="index" v-for="(item, index) in 8" :key="item">
							<cover-view class="dot"></cover-view>
						</cover-view>
					</cover-view>
				</cover-view> -->
				<cover-view class="tips">{{ tips }}</cover-view>
			</cover-view>
		</cover-view>
		<view class="PageLoading" @click.stop="" v-if="mode != 'cover'">
			<view class="PageLoading-content">
				<u-loading class="pic" :customStyle="{ width: '68%', height: '68%' }" mode="flower" color="#4be8b4"></u-loading>
				<!-- <view class="loader">
					<view class="loading">
						<view class="item" :ind="index" v-for="(item, index) in 8" :key="item">
							<view class="dot"></view>
						</view>
					</view>
				</view> -->
				<view class="tips">{{ tips }}</view>
			</view>
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<view class="PageLoading" @click.stop="">
		<view class="PageLoading-content" style="display: flex; justify-content: center; align-items: center">
			<!-- <image class="pic" :src="imgPath + 'components/PageLoading/' + pic" mode=""></image> -->
			<u-loading class="pic" color="red"></u-loading>
			<!-- <view class="loader">
				<view class="loading">
					<view class="item" v-for="(item, index) in 8" :key="item" :ind="index"><view class="dot"></view></view>
				</view>
			</view> -->
			<view class="tips">{{ tips }}</view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script>
import { tools } from "../../utils/util";

export default {
	name: "PageLoading",
	props: {
		mode: {
			type: String,
			default: "cover"
		},
		tips: {
			type: String,
			default: "加载中，请稍后"
		},
		pic: {
			type: String,
			// default: "loading-page.gif"
			default: "65282234.gif"
		}
	},
	data() {
		return {
			imgPath: tools.imgPath
		};
	}
};
</script>

<style lang="scss">
.PageLoading {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.86);
	z-index: 99;
	top: 0;
	left: 0;
	@keyframes loading {
		50% {
			transform: scale(0.4);
			opacity: 0.3;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
	.PageLoading-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		--pic-size: 35vw;
		.pic {
			width: var(--pic-size);
			height: var(--pic-size);
			display: flex;
			margin-bottom: 5vw;
			justify-content: center;
			align-items: center;
		}

		.loader {
			--loading-size: 30vw;
			width: var(--loading-size);
			height: var(--loading-size);
			margin: 5vw auto;
			// border: 1px solid chocolate;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			.loading {
				position: relative;
				width: 100%;
				height: 100%;
				.item {
					--item-size: calc(var(--loading-size) / 4.6);
					--item-radius: 30%;
					display: block;
					width: var(--item-size);
					height: 50%;
					position: absolute;
					left: calc((100% - var(--item-size)) / 2);
					transform-origin: 50% 100%;
					background: red;
					background: #4be8b4;
					border-radius: 100vw;
					.dot {
						position: absolute;
						top: 0;
						left: 0;
						background: #4be8b4;
						border-radius: 50%;
						width: var(--item-size);
						height: var(--item-size);
						transform-origin: 50% 50%;
					}
					// &:nth-child(1) {
					// 	transform: rotate(calc((1 - 1) * 45deg));
					// 	.dot {
					// 		background: tan;
					// 		// animation: loading 1s ease calc((1 - 1) * 0.12s) infinite;
					// 	}
					// }
					// &:nth-child(2) {
					// 	transform: rotate(calc((2 - 1) * 45deg));
					// 	.dot {
					// 		background: gold;
					// 		// animation: loading 1s ease calc((2 - 1) * 0.12s) infinite;
					// 	}
					// }
					// &:nth-child(3) {
					// 	transform: rotate(calc((3 - 1) * 45deg));
					// 	.dot {
					// 		background: blue;
					// 		// animation: loading 1s ease calc((3 - 1) * 0.12s) infinite;
					// 	}
					// }
					@for $i from 1 through 8 {
						&:nth-child(#{$i}) {
							transform: rotate(calc((#{$i} - 1) * 45deg));
							.dot {
								animation: loading 1s ease calc((#{$i} - 1) * 0.12s) infinite;
							}
						}
					}
				}
			}
		}

		.tips {
			font-size: 36rpx;
			// color: #4be8b4;
			color: #fff;
			font-weight: bold;
		}
	}
}
</style>
